<template>
<div class="train-process">
    <title-bar title="训练过程概要"></title-bar>
    <div style="display: flex;align-items: center;">
        <div v-if="chartData.columns.length" style="margin-right:33px;width:60%;">
            <ve-line :colors="['#3F9EFF']" :extend="extend" :data-empty="chartData.rows.length===0" :legend-visible="false" width="100%" height="400px" :data="chartData" :settings="chartSettings"></ve-line>
        </div>
        <div class="train-process-table">
            <span v-for="(item, i) in tableData.columns" :key="i">
                <span>{{item}}</span>
                <span>{{item === tableData.columns[0] ? tableData.rows[0][item] + '(s)' : tableData.rows[0][item]}}</span>
            </span>
        </div>
    </div>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'TrainProcess',
    components: {
        TitleBar
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            extend: {
                series: {
                    showSymbol: false
                },
                yAxis: {
                    axisLine: {
                        show: false
                    }
                },
                xAxis: {
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: false
                    }
                }
            },
            chartSettings: {
                digit: 4,
                xAxisType: 'value',
                xAxisName: ['训练迭代次数'],
                yAxisName: ['Logloss']
            },
            chartData: {
                columns: [],
                rows: []
            },
            tableData: {
                rows: [],
                columns: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            let { TrainingInfo: { rows, columns }, Trainloss } = this.modelDetail.summary.modelsummary.trainresult
            if (Trainloss) {
                this.chartData = {
                    columns: Trainloss.columns,
                    rows: Trainloss.rows
                }
            }
            this.tableData = {
                rows,
                columns
            }
        }
    }
}
</script>

<style lang="less">
.train-process {
    .ve-line > div {
        width: 100% !important;
    }
    .train-process-table {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 38px;
        width: calc(40% - 33px);
        height: 70%;
        flex: 1;
        background: #FBFBFB;
        font-size: 13px;
        color: #464D5F;
        & > span {
            padding: 12px;
            display: flex;
            width: 100%;
            span {
                width: 200px;
            }
        }
    }
}
</style>
